<template>
  <div class="row">
    <template v-if="products.list && products.list.length > 0">
      <div class="col-md-2" v-for="p in products.list" :key="p.goodsId">
        <product :product="p"></product>
      </div>
    </template>
    <div
      class="col-md-6 col-md-offset-3 text-center"
      v-if="!products.list || products.list.length == 0"
      role="alert"
    >
      <span class="alert alert-danger"> 对不起，暂无此类商品 </span>
    </div>
  </div>

  <!-- 分页信息 -->

  <!-- 处理分页参数 -->

  <table align="right">
    <tbody>
      <tr>
        <td>
          <nav aria-label="Page navigation">
            <ul class="pagination pagination-right">
              <li>
                <a
                  href="#"
                  @click.prevent="switchPage(products.pageNo - 1)"
                  aria-label="Previous"
                >
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li v-for="idx in products.totalPage" :key="idx">
                <a href="#" @click.prevent="switchPage(idx)">{{ idx }}</a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="switchPage(products.pageNo + 1)"
                  aria-label="Next"
                >
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
import { http } from "../utils/http";
import Product from "./Product.vue";
export default {
  props: ["cateId"],
  components: {
    Product,
  },
  data() {
    return {
      products: {},
    };
  },
  watch: {
    cateId(newId) {
      http
        .get("/goods/getGoodsByCate", { params: { cateId: newId } })
        .then((resp) => {
          this.products = resp.data.goods;
        });
    },
  },
  methods: {
    fetchProductsByCate(cateId, pageNo) {
      let params = { cateId };
      if (pageNo) {
        params = { cateId, pageNo };
      }
      http.get("/goods/getGoodsByCate", { params }).then((resp) => {
        this.products = resp.data.goods;
      });
    },
    switchPage(no) {
      let pageNo = no;
      if (pageNo < 1) {
        pageNo = 1;
      } else if (pageNo > this.products.totalPage) {
        pageNo = this.products.totalPage;
      }
      if(pageNo!=this.products.pageNo){
        this.fetchProductsByCate(this.cateId,pageNo)
      }
    },
  },
  created() {
    this.fetchProductsByCate(this.cateId);
  },
};
</script>
<style>
@charset "UTF-8";

.goods-item {
  padding: 0 10px 10px;
  background-color: #fff;
  margin-bottom: 15px;
}

.goods-item img {
  width: 100%;
}

.goods-item {
  padding-top: 1px;
  position: relative;
  z-index: 0;
}

.goods-item::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.goods-item:hover::after {
  border: 1px solid #ff053b;
}

.goods-item h3 {
  font-size: 16px;
  margin: 0;
  line-height: 30px;
}

.goods-item a {
  color: #777;
}

.goods-item a:hover {
  text-decoration: none;
  font-weight: normal;
}

.goods-item .price {
  font-size: 16px;
}

.goods-item s,
.goods-item .ori-price {
  color: #5a5a5a;
}

.goods-item div {
  line-height: 24px;
}

.goods-item .sales {
  font-size: 14px;
}

.col-md-2 {
  margin-bottom: 15px;
}
</style>
